<!--资产列表 -->
<template>
    <div class="page assetsList-page" data-page="assetsList" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link" @click="$root.backToTab()">
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-search">
            <div class="link-page-search-input" style="width:80%">
                <i class="iconfont icon-APPicon_sousuo1"></i>    
                <input type="text" placeholder="搜一搜" id="assets_list_search">
            </div>
            <a class="link popover-open" data-popover="#assets_menuBuild">
                <i class="iconfont icon-APPicon_shaixuan1
" id="assets_list_build" style="font-size:24px"></i>
            </a>
        </div>
        <div data-infinite-distance="50" id=“page-content” class="page-content infinite-scroll-content ptr-content" @ptr:refresh="refreshList" @infinite="loadMore">
            <div class="assets-info-tital" id="assets-info-tital">
            </div>
            <div class="ptr-preloader">
                <div class="preloader color-multi"></div>
                <div class="ptr-arrow"></div>
            </div>
            <div class="list media-list unitStat-list-dslist no-hairline-bottom search-list searchbar-found" style="padding-top:4px;" id="assets_list">
                <ul></ul>
            </div>
            <div id="dector_preloader" class="preloader infinite-scroll-preloader"></div>
        </div>
        <div class="more-task-btn"   @click="scanning">
            <i class="iconfont icon-weibiaoti--2"></i>
        </div>
        <div class="popover select-option-con" id="assets_menuBuild">
            <div class="popover-angle"></div>
            <div class="popover-inner">
            <div class="list">
            <ul>
                <li><a href="" class="list-button item-link popover-close" id="trouble_bulidList">选择建筑物</a></li>
                <li><a href="" class="list-button item-link popover-close removeScreen select-active" @click="removeScreen" >清&nbsp&nbsp&nbsp&nbsp&nbsp空</a></li>
            </ul>
            </div>
            </div>
        </div> 
    </div>
</template>
<script>
    return {
        mounted() {
            var self = this;
            var app = self.$app;
            //页面传参
            self.currentOrgId = this.$route.params.categoryId;
            self.systemName= this.$route.params.systemName;
            self.type= this.$route.params.type;
            self.total= this.$route.params.total;
            self.expireCount= this.$route.params.expireCount;
            self.systemId=this.$route.params.systemId;
            self.fbsId=this.$route.params.fbsId;
            self.fbsName=this.$route.params.fbsName;
            if(self.systemId==-1){
                jQuery('#assets_list_build').hide()
            }
            if( self.systemId==-1){
                IfJzwFlag=true
            }else{
                IfJzwFlag=false
            }
        },
        data: function () {
            return {
              pageName:"assetsList", 
              allowInfinite: true,
              pageIndex:0,
              pageSize:25,
              categoryId:-1,
              currentOrgId: 0,
              selectOptionOrg : 0,
              selectContent:'',
              selectOptionUse : -1,
              selectOptionUseIndex : '',
              selectOptionMaintain : -1,
              selectOptionMaintainIndex : '',
              selectOptionisGuarantee : -1,
              selectOptionisGuaranteeIndex : '',
              selectOptiomCategoryIndex:'',
              chargeBuildId: 0,//建筑物id
              buildName: "",
            }
        },
        methods: {
            backToRefresh:function(){
                var self = this;
                var $ = self.$$;
                self.reInit();
                $('#dector_preloader').hide();
                self.getListData();
            },
            //原生扫一扫
            scanning:function(){
                native.scanQrCode();
            },
            getSelectData:function(){//绑定下拉框数据源
            	var self = this;
                var codeList2 = [{
                    id:0,
                    name:'在用'},
                {
                    id:1,
                    name:'停用'
                }];
                jQuery("#select_isUse").click(function(e) {
                    selectOptionFn(codeList2,function(data){
                        if(self.selectOptionUse==data.id){
                            jQuery("#select_isUse").html("是否在用");
                            jQuery("#select_isUse").removeClass('select-active');
                            self.selectOptionUse=-1;
                        }else{
                            jQuery("#select_isUse").html(data.name);
                            jQuery("#select_isUse").addClass('select-active');
                            self.selectOptionUse=data.id;
                        }
                        if(self.selectOptionUseIndex != data.index){
                            self.selectOptionUseIndex = data.index;
                        }else{
                            self.selectOptionUseIndex = "";
                        }
                        self.clearContent();
                        self.getListData();
                    },self.selectOptionUseIndex);
                });
                var codeList3 = [{
                    id:0,
                    name:'需要维保'},
                {
                    id:1,
                    name:'即将维保'   
                },{
                    id:2,
                    name:'不需要维保'
                }];
                jQuery("#select_isNeedMaintain").click(function(e) {
                    selectOptionFn(codeList3,function(data){
                        if(self.selectOptionMaintain==data.id){
                            jQuery("#select_isNeedMaintain").html("是否需要维保");
                            jQuery("#select_isNeedMaintain").removeClass('select-active');
                            self.selectOptionMaintain=-1;
                        }else{
                            jQuery("#select_isNeedMaintain").html(data.name);
                            jQuery("#select_isNeedMaintain").addClass('select-active');
                            self.selectOptionMaintain=data.id;
                        }
                        if(self.selectOptionMaintainIndex != data.index){
                            self.selectOptionMaintainIndex = data.index;
                        }else{
                            self.selectOptionMaintainIndex = "";
                        }
                        self.clearContent();
                        self.getListData();
                    },self.selectOptionMaintainIndex);
                });
                var codeList4 = [{
                    id:0,
                    name:'质保期内'},
                {
                    id:1,
                    name:'即将报废'   
                },{
                    id:2,
                    name:'已报废资产'
                }];
                jQuery("#select_isGuarantee").click(function(e) {
                    selectOptionFn(codeList3,function(data){
                        if(self.selectOptionisGuarantee==data.id){
                            jQuery("#select_isGuarantee").html("是否质保期内");
                            jQuery("#select_isGuarantee").removeClass('select-active');
                            self.selectOptionisGuarantee=-1;
                        }else{
                            jQuery("#select_isGuarantee").html(data.name);
                            jQuery("#select_isGuarantee").addClass('select-active');
                            self.selectOptionisGuarantee=data.id;
                        }
                        if(self.selectOptionisGuaranteeIndex != data.index){
                            self.selectOptionisGuaranteeIndex = data.index;
                        }else{
                            self.selectOptionisGuaranteeIndex = "";
                        }
                        self.clearContent();
                        self.getListData();
                    },self.selectOptionisGuaranteeIndex);
                });
                
            },
            //获取资产类别
            getAssetsCategoryIdForApp:function(){
            	var self=this;
            	var $ = self.$;
            	Dao.getAssetsCategoryIdForApp({
					orgIds:self.currentOrgId,
					systemId:self.systemId,
            	},function(data){
            		if(data){
            			var categoryList=data.categoryList;
            			var statusstatus=data.status;
                        jQuery("#select_type").click(function(e) {
                            selectOptionFn(categoryList,function(data){
                                if(self.categoryId==data.id){
                                    jQuery("#select_type").html("类别");
                                    jQuery("#select_type").removeClass('select-active');
                                    self.categoryId=-1;
                                }else{
                                    jQuery("#select_type").html(data.name);
                                    jQuery("#select_type").addClass('select-active');
                                    self.categoryId=data.id;
                                }
                                if(self.selectOptiomCategoryIndex != data.index){
                                    self.selectOptiomCategoryIndex = data.index;
                                }else{
                                    self.selectOptiomCategoryIndex = "";
                                }
                                self.clearContent();
                                self.getListData();
                            },self.selectOptiomCategoryIndex);
                        });
            		}
            	});
            },
            initData:function(fbsId){//获取列表数据
            	var self=this;
                var $ = self.$;
                Dao.getAssetsInfoForApp({
                	orgId:self.currentOrgId,
                	categoryId:-1,
                	systemId:self.systemId,
                	isUse:-1,
                	name:self.selectContent,
                    fbsId:fbsId || self.fbsId ||  0,
                },function(data) {
                    let type = 0
                    let total = 0
                    let expireCount = 0
                // if(data != ''){
                //     type=data[0].type
                //     total=data[0].total
                //     expireCount=data[0].expireCount
                // }
                $("#assets-info-tital").empty();
            	$("#assets-info-tital").append(`
           			<div class="assets-type-name" id="assets-type-name">`+self.systemName+`</div>
   	                <div class="assets-line">
   	                	<div class="assets-item assets-need-maintain" style="width:25%">
   	                		<p class="assets-item-title">资产类别</p>
   	                		<p class="assets-item-num" id="type">`+self.type+`<span class="assets-item-unit">种</span></p>
   	            		</div>
   	            		<div class="assets-item assets-need-maintain" style="width:25%">
   	                		<p class="assets-item-title">资产总数</p>
   	                		<p class="assets-item-num assets-item-color" id="total">`+self.total+`<span class="assets-item-unit">个</span></p>
   	        			</div>
   	            		<div class="assets-item assets-need-maintain" style="width:25%">
   	                		<p class="assets-item-title">过期资产数</p>
   	                		<p class="assets-item-num" id="num">`+self.expireCount+`<span class="assets-item-unit">个</span></p>
   	        			</div>
   	                </div>
                `)
            })
            },
            getListData:function(fbsId){//获取列表数据
                var self = this;
                var $ = self.$;
                //筛选按钮有值变色
                if(self.fbsName !=0 && self.fbsName){
                    jQuery("#trouble_bulidList")[0].innerText = self.fbsName;
                }
                if(jQuery("#trouble_bulidList")[0].innerText != "选择建筑物"){
                    jQuery("#assets_list_build").addClass("select-active");
                }else{
                    jQuery("#assets_list_build").removeClass("select-active");
                }
                Dao.getAListForApp({
                	userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                	categoryIds:self.categoryId,
                    queryType:1,
                	organizationId:self.currentOrgId,
                	systemId:self.systemId,
                	isUse:self.selectOptionUse,
                	pageSize:self.pageSize,
                	pageIndex:self.pageIndex,
                	name:self.selectContent,
                    fbsId:fbsId || self.fbsId || ''
                },function(data,total) {
                    if(self.pageIndex==0){
                        $("#assets_list ul").empty();
                    }
                    if (data && data.length > 0){
                        if (self.pageSize * self.pageIndex + data.length < total) { //没分页
                            $("#dector_preloader").show();
                            self.allowInfinite = true;
                        } else {  //有分页
                            $("#dector_preloader").hide();
                            self.allowInfinite = false;
                        }
                        for (var i=0;i<data.length;i++) {
                            $("#assets_list ul").append(`
                                <li>
                                    <a id="jump_to_assetsDetail_`+data[i].id+`" class="item-link item-content" data-view=".view-main">
                                        <div class="item-inner" style="padding: 0;">
                                        	<div class="item-subtitle assets-status">` +(data[i].status==0?`<span>在用</span>`:`<span>停用</span>`)+ `<span>`+data[i].categoryName+`</span></div>
                                            <div class="item-title-row" style="padding-right: 0;">
                                                <div class="item-title decter-name-con">
                                                    <span class="decter-name">`+common.transNullundefinedToline(data[i].name)+ `</span>
                                                </div>
                                            </div>
                                            <div class="item-subtitle decter-mesage">` + common.transNullundefined(data[i].location) + `</div>
                                        </div>
                                        <div class="decter-pic-con" id="vedio_image_`+data[i].id+`"></div>
                                    </a>
                                </li>
                            `);

                            //跳转
                            jQuery("#jump_to_assetsDetail_"+data[i].id).off().on("click",{'res':data[i]},function(e) {
                                app.router.navigate(`/assetsDetail/` + e.data.res.id + `/''/`);
                            })
                            //展示图片
                            showImage(jQuery("#vedio_image_"+data[i].id),data[i].picturesUrls,1);
                        }
                    } else { //暂无数据
                        $("#dector_preloader").hide();
                        self.allowInfinite = false;
                        if (self.pageIndex == 0) {
                             $("#assets_list ul").empty().append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
                        }
                    }
                });
            },
            backToTab: function() {
                app.methods.backToTab();
            },
            loadMore:function(){
                var self = this;
                if (!self.allowInfinite) return;
                self.allowInfinite = false;
                setTimeout(function () {
                  self.pageIndex++;
                  self.getListData();
                  self.allowInfinite = true;
                }, 1000);
            },
            refreshList: function (e, done) {
                if (done && e) {
                    var self = this;
                    var $ = self.$$;
                    setTimeout(function () {
                        self.reInit();
                        $('#dector_preloader').hide();
                        self.getListData();
                        done();
                    }, 1000);
                }
            },
            reInit:function(){
                var self = this;
                self.pageIndex = 0;
                $(".page-content").scrollTop(0,300);
                $("#assets_list ul").empty();
                if(!self.allowInfinite){
                    self.allowInfinite = true;
                    $('#dector_preloader').show();
                }
            },
            clearContent:function() {
                this.pageIndex = 0;
                $("#assets_list ul").empty();
            },
            removeScreen:function(){
                var self = this;
                //self.currentOrgId=userInfor.organizationIds;
                self.fbsName = ''
                self.fbsId =''
                jQuery("#trouble_bulidList").html("选择建筑物");
                jQuery("#trouble_bulidList").removeClass('select-active');
                jQuery("#assets_list_build").removeClass('select-active');
                self.getListData(0);
                self.initData()
            },
            //选择建筑
            select_buildList: function () {
                var self = this;
                loadSelectBuildFun(self.currentOrgId, function (data) {
                    self.chargeBuildId = data.buildId;
                    self.buildName = data.buildName;
                    self.fbsName = self.buildName
                    self.initData(self.chargeBuildId);
                    $("#trouble_bulidList").html(data.buildName);
                    jQuery("#assets_list_build").addClass('select-active');
                    this.pageIndex = 0;
                    self.getListData(self.chargeBuildId);
                });
            },
        },
        on: {
            pageInit: function (e, page) {
                var self = this;
                var $ = self.$;
               
                //搜索
                jQuery("#assets_list_search").keypress(function(e) {
                    let name = jQuery("#assets_list_search").val();
                    if (e.which == 13) {
                        self.selectContent = name;
                        $("#assets_list ul").empty();
                        self.pageIndex = 0;
                        self.getListData();
                    };
                });
                self.clearContent();
                self.pageIndex = 0;
                self.getSelectData();
                self.getListData();
                self.initData();
                self.getAssetsCategoryIdForApp();
                $("#trouble_bulidList").click(function () {
                    self.select_buildList();
                })
            },
            pageAfterIn: function(e, page) {
               var self = this;
               var $ = self.$;
            },
            pageBeforeRemove: function(e, page) {
               
            }
        }
    }
</script>
<style scoped>
    .unitStat-list-dslist ul:before{
        height: 0 !important;
    }
    .select-option {
        padding: 10px 5px;
        font-size: 12px;
        z-index: 3;
        position: fixed;
        width: 100%;
        margin-top: 48px;
    }
   .moreDectorState-page .unitStat-list-dslist{
        padding-top: 25px;
   }
    .global-search {
        background: #fff;
        height: 48px;
        color: #666666 !important;
        font-size: 12px;
        text-align: center;
        line-height: 48px;
    }
    .global-search i {
        font-size: 15px;
        line-height: 48px;
        overflow: hidden;
    }
    .item-title span {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: 12px;
    }
    .decter-name{
        font-size: 16px !important;
    }
    .item-inner div{
        line-height: 25px; 
    }
    .assets-status span{
        color: #2471CA;
        padding-right: 10px;
    }
</style>